<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="/lib/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/css/userManage.css" />
    <!--<link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.css" />-->
    <!--<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <title>Title</title>

    <style>
        .link{
            height: 50px;
            background-color:#f8f8f8;
        }
        .link a {
            margin-left:10px;
            padding-top:10px;
            width: 80px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            color: #666;
            font-size: 20px;
            font-weight:300;
        }
        .link a:hover {
            font-weight:500;
        }
        b{
            margin-left:10px;
            padding-top:10px;
            font-weight: 700;
            border-bottom: 2px solid #38f;
            color: #323232;
            font-size: 20px;
        }
    </style>
</head>
<body>
<script type="text/x-template" id="page">
    <ul class="pagination" style="float: right">
        <li v-show="current != 1" @click="current-- && goto(current--)" >
            <a href="#">上一页</a>
        </li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
            <a href="#" >下一页</a>
        </li>
    </ul>
</script>


<div class="link">
    <a href="blogManage.html" style="display: inline-block">
        博文管理
    </a>
    <b>用户管理</b>
</div>
<br />
<div id="vueUser">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>用户</th>
            <th>昵称</th>
            <th>身份</th>
            <th>修改权限</th>
            <th>注销</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="value in userInfo">
            <td><a :href="getUserHref(value.id)" target=_blank>{{value.name}}</a></td>
            <td>{{value.username}}</td>
            <td>{{value.role}}</td>
            <td><button type="button"  class="btn btn-xs btn-link">
                <span class="glyphicon glyphicon-user"></span> 权限</button></td>
            <td><button type="button"  class="btn btn-xs btn-link" v-on:click="deleteUser(value.id)">
                <span class="glyphicon glyphicon-remove"></span> 注销</button></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="app">
    <ul class="pagination" style="float: right">
        <li v-show="current != 1" @click="current-- && goto(current--)" >
            <a href="#">上一页</a>
        </li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
            <a href="#" >下一页</a>
        </li>
    </ul>
</div>
<script>
    var v1=new Vue({
        el:'#vueUser',
        data:{
            userInfo: [
            ]
        },
        methods: {
            getDataJson:function(){
                console.log(1);
                self=this;
                jQuery.getJSON("./allUsers",{pagesize: 8,current:1},function(data){
                    console.log(data);
                    v1.$data.blogInfo=data.conten;
                    vm.current=1;
                    vm.allpage=data.allpage;
                })
            },
            deleteUser:function(UserId){
                console.log(UserId);
                if(confirm('确定注销该用户吗？'))
                {
                    //把删除的博文信息发给后台
                    //jQuery.post("./testJson", {username: jQuery("#username").val(), userpwd: jQuery("#userpwd").val()});
                    jQuery.post("./deleteUser", {uid:UserId});
                    location.reload();
                }
                else
                {}
            },
            getUserHref:function(userid){
                return 'http://localhost:5001/myCenter?userid='+userid;    //在此处添加用户中心跳转的URL
            }
        },
        created :function(){
            this.getDataJson();
        }
    })

    var vm=new Vue({
        el:"#app",
        data:{
            current:1,    //当前页号
            showItem:5,   //页码显示项数
            allpage:1,    //当前页数
        },
        created:function(){
            var self=this;
            jQuery.post("./allUsers",{pagesize: 8,current:self.current},function(data){
                console.log("current:"+self.current);
                console.log(data);
                self.allpage=data.allpage;
                v1.$data.userInfo=data.conten;
            })
        },
        computed:{
            pages:function(){
                var pag = [];
                if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem,this.allpage);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                        i = this.showItem;
                    if( middle >  (this.allpage - this.showItem)  ){
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while(i--){
                        pag.push( middle++ );
                    }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(index == this.current) return;
                this.current = index;
                //这里可以发送ajax请求
                self=this;

                jQuery.post("./allUsers",{pagesize: 8,current:self.current},function(data){
                    console.log("current:"+self.current);
                    console.log(data);
                    self.allpage=data.allpage;
                    v1.$data.userInfo=data.conten;
                })
            }
        }
    })
</script>
</body>
</html>